<template>
  <div class="Home-img-list">
    <div class="item">
      <div class="mask"></div>
      <div class="title">关于我们</div>
      <img class="item-img hover" src="@/assets/imgs/u24.jpg" alt="" />
    </div>
    <div class="item">
      <div class="title">案例</div>
      <img class="item-img hover" src="@/assets/imgs/u30.jpg" alt="" />
    </div>
    <div class="item">
      <div class="title">交互体验</div>
      <img class="item-img hover" src="@/assets/imgs/u35.jpg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      eienList: [
        {
          title: '5',
          cont: '个设计中心',
        },
        {
          title: '20+',
          cont: '年沉淀积累',
        },
        {
          title: '46',
          cont: '座城市',
        },
        {
          title: '2000+',
          cont: '个精品案例',
        },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
.Home-img-list {
  display: flex;
  .item {
    margin-right: 30px;
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: hidden;
    width: 410px;
    .title {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 16px;
      z-index: 99999;
    }
    &:last-child {
      margin-right: 0;
    }
    .item-img {
      width: 410px;
    }
  }
}
</style>
